@extends('desktop.template.bootstrap')
@section('title', $section->name.' - '.$book->name.' - '.$book->author.' - 007书房')
@section('keywords', $section->name.','.$book->name.','.$book->author.',007书房')
@section('description', $book->name.'，'.$book->author.'，'.$section->name.'，'.str_limit(str_replace("&nbsp;","", strip_tags($section->content)), 260))

@section('scripts')
<link rel="stylesheet" href="{{asset('css/public-page.css')}}" />
@endsection

@section('header')
@include('desktop.template.navbar-complete')
@endsection

@section('content')

<section class="banner">
	<div class="container">
		<ol class="breadcrumb">
			<li><a href="{{ url('/') }}">首页</a></li>
			@if(!is_null($category))
			<li><a href="{{ url('/categories/'.$category->order) }}">{{ $category->name }}</a></li>
			@endif
			<li><a href="{{ url('/books/'.$book->id) }}">{{ $book->name }}</a></li>
			<li class="active"><a href="javascript:void(0)">{{ $section->name }}</a></li>
		</ol>
	</div>
</section>

<section class="page">
	<div class="container">
		<div class="page">
			<h2 class="title">
				{{ $section->name }}
			</h2>
			<ul class="info list-inline list-unstyled">
				<li><span class="fa fa-fw fa-book"></span> {{ $book->name }}</li>
				<li><span class="fa fa-fw fa-user-circle-o"></span> {{ $book->author }}</li>
				<li><span class="fa fa-fw fa-file-text-o"></span> {{ mb_strlen($section->content,'UTF8') }}字</li>
			</ul>
			<hr />
			<div class="content">
				{!! $section->content !!}
			</div>
			<div class="error">
				<span class="fa fa-fw fa-warning"></span>
				<a href="#" data-toggle="modal" data-target="#add_option">错误反馈</a>
			</div>
		</div>
		<div class="ctrl-container">
			<div class="row">
				<div class="col-xs-4">
					<a href="@if($section->preSection()){{ url('/books/'.$book->id.'/sections/'.$section->preSection()) }} @else {{ url('/books/'.$book->id) }} @endif">上一章</a>
				</div>
				<div class="col-xs-4 line">
					<a href="{{ url('/books/'.$book->id) }}">目录</a>
				</div>
				<div class="col-xs-4">
					<a href="@if($section->nextSection()){{ url('/books/'.$book->id.'/sections/'.$section->nextSection()) }} @else {{ url('/books/'.$book->id) }} @endif">下一章</a>
				</div>
			</div>
		</div>
		<div class="comment-container">
			<section class="panel panel-default">
				<header class="panel-heading">评论</header>
				@if(Auth::check())
				<footer class="panel-footer">
					<article class="chat-item">
						<div class="pull-left thumb-sm avatar">
							<img src="{{ Auth::user()->avatarUrl() }}" class="img-circle">
						</div>
						<section class="chat-body">
							<div class="m-b-none">
								<div class="input-group">
									<input type="text" class="form-control" name="content" placeholder="说点什么吧~"> 
									<span class="input-group-btn">
										<button class="btn btn-default confirmComment" type="button">发布</button>
									</span>
								</div>
							</div>
						</section>
					</article>
				</footer>
				@endif
				<section class="chat-list panel-body">
					@if($section->book->comments->count() > 0)
					@foreach($section->book->comments as $comment)
					<article class="chat-item left @if($loop->first) @endif">
						<div class="pull-left thumb-sm avatar">
							<img src="{{ $comment->member->avatarUrl() }}" class="img-circle">
						</div>
						<section class="chat-body">
							<div class="panel">
								<div class="panel-body">
									<span class="arrow left"></span>
									<p class="m-b-none">{{ $comment->content }}</p>
								</div>
							</div>
							<small class="text-muted">
								<i class="fa fa-ok text-success"></i> {{ $comment->created_at->format('Y-m-d h:i') }}
							</small>
						</section>
					</article>
					@endforeach
					@else
					<article class="chat-item text-center noComments">
						<section class="chat-body">
							暂时没有评论哦，来抢占沙发吧~！
						</section>
					</article>
					@endif
				</section>
			</section>
		</div>
		<div class="modal fade" id="add_option" tabindex="-1" role="dialog" aria-labelledby="add_option" style="text-align: left;">
			<div class="modal-dialog">
				{!! Form::open(array('url' => 'feedbacks')) !!}
		   		<div class="modal-content">
		   			<div class="modal-header">
		      			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		       			<h4 class="modal-title" id="myModalLabel">错误反馈</h4>
		      		</div>
		     		<div class="modal-body">
	  					<div class="form-group">
	  						<div class="row">
	  							<div class="col-xs-12">
	  								{!! Form::textarea('content', null, array('class' => 'form-control', 'placeholder' => '请输入需要反馈的内容，我们会尽快处理您遇到的问题！请继续支持007书房哦~^o^~ ，我们会努力做的更好！')) !!}
	  							</div>
	  						</div>
	  					</div>
		      		</div>
		      		{!! Form::hidden('book_id', $book->id) !!}
		      		{!! Form::hidden('section_id', $section->order) !!}
		      		<div class="modal-footer">
		        		<button type="submit" class="btn btn-danger btn-radius" style="width: 120px;">提交</button>
		      		</div>
		    	</div>
		    	{!! Form::close() !!}
			</div>
		</div>
		<div class="modal fade bs-example-modal-sm" id="notices" tabindex="-1" role="dialog" data-show="1">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">提醒</h4>
					</div>
					<div class="modal-body">
						@if (Session::has('msg'))
						<p><strong>消息提示：</strong> {{ Session::get('msg') }}</p>
						@endif
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<script type="text/javascript">
@if (Session::has('msg'))
	$('#notices').modal();
@endif

$(document).ready(function() {
	$('.confirmComment').click(function() {
		if($("input[name='content']").val()) {
			$.post('/api/sections/{{ $section->id }}/comment',
			{
				content: $("input[name='content']").val(),
				member_id: @if(Auth::check()) '{{ Auth::user()->id }}' @else '' @endif,
				_token: '{{ csrf_token() }}'
			}, function(data) {
				var section = '<article class="chat-item left"><div class="pull-left thumb-sm avatar"><img src="' + 
					data.avatarUrl + '" class="img-circle"></div><section class="chat-body"><div class="panel"><div class="panel-body"><span class="arrow left"></span><p class="m-b-none">' + 
					data.content + '</p></div></div><small class="text-muted"><i class="fa fa-ok text-success"></i>' + 
					data.created_at + '</small></section></article>';
				$('.chat-list').children(0).before(section);
				$("input[name='content']").val('')
				$('.noComments').hide();
			})
		}
		return false;
	})
})
</script>
@endsection